<template>
  <div id="structure">
    <header class="banner">
      <slot name="img"></slot>
    </header>
    <main class="main">
      <slot name="breadcrumb"></slot>
      <section class="container">
        <aside class="left-sidebar">
          <slot name="bar"></slot>
        </aside>
        <div class="right-centent">
          <slot name="right_centent"></slot>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  name: "structure",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped lang="less">
/deep/ .el-breadcrumb {
  height: 40px;
  line-height: 40px;
  background-color: #fff;
}
#structure {
  width: 100%;
  .banner {
    width: 100%;
    height: 180px;
    background-color: burlywood;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .main {
    width: 1200px;
    margin: 0 auto;
    margin-top: -40px;

    .container {
      display: flex;
      width: 100%;
      background-color: #fff;
      .left-sidebar {
        width: 220px;
        box-shadow: 10px 0 10px #eee;
        .title {
          width: 100%;
          height: 70px;
          background-color: skyblue;
        }
      }
      .right-centent {
        width: 980px;
        padding: 25px 70px 70px;
        box-sizing: border-box;
      }
    }
  }
}
</style>